<template>
  <div class="recharge-template">
    <div class="operate-box">
      <el-button size="small"
                 type="primary"
                 @click="openDialog()">新增
      </el-button>
    </div>
    <el-table :data="tableData" v-loading="loading">
      <el-table-column label="ID" prop="id" width="80px"/>
      <el-table-column label="充值条数" prop="count"/>
      <el-table-column label="单价（元/条）" prop="price"/>
      <el-table-column label="充值金额" prop="money"/>
      <el-table-column label="更新时间" prop="update_time"/>
      <el-table-column label="操作" width="160px">
        <template slot-scope="prop">
          <el-button size="mini" type="primary" @click="openDialog(prop.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteOne(prop.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :page-size.sync="form.size"
          :current-page.sync="form.page"
          :total="total"
          :hide-on-single-page="true"
          @current-change="getList"
      />
    </div>
    <edit-template ref="edit" @success="getList(1)"/>
  </div>
</template>

<script>
import {pageSize} from "@/constant";
import editTemplate from "./parts/editTemplate";

export default {
  name: "rechargeTemplate",
  data() {
    return {
      tableData: [],
      total: 0,
      loading: false,
      form: {
        size: pageSize,
      }
    }
  },
  mounted() {
    this.getList(1)
  },
  methods: {
    openDialog(row) {
      this.$refs.edit.open(row)
    },
    deleteOne(row) {
      this.$confirm(`确认删除该充值模板？`, '删除模板')
          .then(() => {
            this.$axios.post('/api/v1/sms/recharge/template/update', {
              id: row.id,
              count: parseFloat(row.count),
              price: parseFloat(row.price),
              money: parseFloat(row.money),
              state: 2
            }).then((res) => {
              if (res.success) {
                this.$message.success('操作成功')
                this.getList(1)
              }
            }).catch((err) => {
              console.log(1, err)
              this.$message.error(err.message || err.statusText)
            })
          })

    },
    async getList(page = 1) {
      this.loading = true
      let tableData = [],
          total = 0
      await this.$axios.get('/api/v1/sms/recharge/templates', {
        params: {
          ...this.form,
          page: page
        },
        abort: true
      }).then(res => {
        total = res.total
        tableData = res.data || []
      })
      this.loading = false
      this.tableData = tableData
      this.total = total
    },
  },
  components: {
    editTemplate
  }
}
</script>

<style lang="less">
.recharge-template {
  .operate-box {
    display: flex;
    justify-content: flex-end;
  }
}
</style>